<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单页网站</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<link type="text/css" href="css/animation.css" rel="stylesheet" />

</head>
<body>
<div id="pic1" num="1">
	<div class="nag-position">
		<div class="floor active"><b></b></div>
		<div class="floor"><b></b></div>
		<div class="floor"><b></b></div>
		<div class="floor"><b></b></div>
		<div class="icon">
			<div class="sina"></div>
			<div class="qq"></div>
		</div>
	</div>
	<div id='nag-bar'>
		<img src="images/ar-logo.png">
		
		<a href="#page1" title="Home" class="selected">Home
			<span class="underline"></span>
		</a>
		<a href="#page2" title="Apple" class="">Apple
			<span class="underline"></span>
		</a>
		<a href="#page3" title="Home" class="">Banana
			<span class="underline"></span>
		</a>
		<a href="#page4" title="Home" class="">Orange
			<span class="underline"></span>
		</a>
		<a href="#" target="_blank" class="be" title=""></a>
		<span id="separator1"></span>
		<a href="#" target="_blank" class="fb" title="Banana"></a>
		<span id="separator2"></span>
		<a href="#" class="mail" title="Say hello!"></a>
	</div>
	<div class="divtop">
		<img id="btntop" class="btntop" src="images/top.png" />
	</div>
	<div class="back page1" id='page1' >
		<div id="circleContent">
			<div class="circleWrapper">
				<div id="circlrImages" class="circlrImages">
					<img id="image_about" src="images/1.png" alt="" width="402" height="402" style="display:block;"/>
					<img id="image_works" src="images/2.png" alt="" width="402" height="402"/>
					<img id="image_contact" src="images/3.png" alt="" width="402" height="402" />
				</div>
				<div class="circleBig">
					<div id="circleMenu" class="circleMenu">
						<a id="about" class="about" href="">About me</a>
						<a id="works" class="works" href="">Works</a>
						<a id="contact" class="contact" href="">Contact</a>
					</div>
				</div>
			</div>
			<div id="circle_about" class="circle">
				<div class="description">
					<ul>
						<li><a href="#">Pan JiaChen</a></li>
						<li><a href="#">Opportunism</a></li>
						<li><a href="#">Front-end  newbie</a></li>
					</ul>
				</div>
			</div>
			<div id="circle_works" class="circle">
				<div class="description">
					<div class="thumbs">
						<a href="#"><img src="thumbs/1.jpg" alt=""/></a>
						<a href="#"><img src="thumbs/2.jpg" alt=""/></a>
						<a href="#"><img src="thumbs/3.jpg" alt=""/></a>
						<a href="#"><img src="thumbs/4.jpg" alt=""/></a>
						<a href="#"><img src="thumbs/5.jpg" alt=""/></a>
						<a href="#"><img src="thumbs/6.jpg" alt=""/></a>
					</div>
				</div>
			</div>
			<div id="circle_contact" class="circle">
				<div class="description">
					<ul>
						<li><a href="#">Email</a></li>
						<li><a href="#">Sina</a></li>
						<li><a href="#">QQ</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="sl_examples">
			<a href="javascript:;" id="example1" data-hover="Creativity">Imagination</a>
			<a href="javascript:;" id="example2" data-hover="Optimistic">Attitude</a>
			<a href="javascript:;" id="example3" data-hover="Passion">Working</a>
			<a href="javascript:;" id="example4" data-hover="Hungry">Studing</a>
			<a href="javascript:;" id="example5" data-hover="Beauty">Design</a>
		</div>
	</div>

	<div class="back page2" id='page2'>
		<div id="page2yue1" class="page2yue1"></div>
		<div id="page2yue2" class="page2yue2"></div>
		<div id='apple'></div>
		<div id="page2overlay">
             <div class="page2Nav" id="page2Nav">
                <div class="page2Item hobby">
                    <img src="images/bg_hobby.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Hobby</h2>
                    <ul>
                        <li><a href="#">Jogging</a></li>
                        <li><a href="#">Psychology</a></li>
                        <li><a href="#">Football</a></li>
                    </ul>
                </div>
                <div class="page2Item detail">
                    <img src="images/bg_detail.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Detail</h2>
                    <ul>
                        <li><a href="#">21 years old</a></li>
                        <li><a href="#">Shanghai</a></li>
                        <li><a href="#">Major of computer</a></li>
                    </ul>
                </div>
                <div class="page2Item language">
                    <img src="images/bg_language.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Language</h2>
                    <ul>
                        <li><a href="#">Javascript</a></li>
                        <li><a href="#">C++</a></li>
                        <li><a href="#">Php</a></li>
                    </ul>
                </div>
                <div class="page2Item contact">
                    <img src="images/bg_contact.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Contact</h2>
                    <ul>
                        <li><a href="#">Phone:13916059445</a></li>
                        <li><a href="#" id='aEmail'>Email:panfree23@gmail.com</a></li>
                    </ul>
                </div>
                <div class="page2Item fav">
                    <img src="images/bg_fav.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Love</h2>
                    <ul>
                        <li><a href="#">Peace</a></li>
                        <li><a href="#">Knowledge</a></li>
                        <li><a href="#">Challenge</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <h2 class="text-flash">我是个好人！摸摸我就知道了！</h2>
	</div>

	<div class="back page3" id='page3'>
		<div class="rw-wrapper">
			<h2 class="rw-sentence">
				<span>Real character you need</span>
				<br />
				<span>Is it </span>
				<div class="rw-words rw-words-1">
					<span>courage?</span>
					<span>patient?</span>
					<span>persevere?</span>
					<span>curious?</span>
					<span>passion?</span>
					<span>love?</span>
				</div>
				<br />
				<span>To be a real of yourself</span>
			</h2>
		</div>
		<div class="center major-list-outer">
			<ul class="major-list">
				<li class="major-item" id="dx"> <a href="javascript:;"><span class="txt-hide front-face"></span><span id="back-face1" class='back-face'></span></a></li>
				<li class="major-item" id="rj"> <a href="javascript:;"><span class="txt-hide front-face"></span><span id="back-face2" class='back-face'></span></a></li>
				<li class="major-item" id="jx"> <a href="javascript:;"><span class="txt-hide front-face"></span><span id="back-face3" class='back-face'></span></a></li>
				<li class="major-item" id="gdz"><a href="javascript:;"><span class="txt-hide front-face"></span><span id="back-face4" class='back-face'></span></a></li>
				<li class="major-item" id="jsj"><a href="javascript:;"><span class="txt-hide front-face"></span><span id="back-face5" class='back-face'></span></a></li>
				<li class="major-item" id="kz"> <a href="javascript:;"><span class="txt-hide front-face"></span><span id="back-face6" class='back-face'></span></a></li>
				<li class="major-item" id="jg"> <a href="javascript:;"><span class="txt-hide front-face"></span><span id="back-face7" class='back-face'></span></a></li>
				<li class="major-item" id="sx"> <a href="javascript:;"><span class="txt-hide front-face"></span><span id="back-face8" class='back-face'></span></a></li>
				<li class="major-item" id="gl"> <a href="javascript:;"><span class="txt-hide front-face"></span><span id="back-face9" class='back-face'></span></a></li>
				<li class="major-item" id="ch"> <a href="javascript:;"><span class="txt-hide front-face"></span><span id="back-face10"class='back-face'></span></a></li>
				<li class="major-item" id="wl"> <a href="javascript:;"><span class="txt-hide front-face"></span><span id="back-face11"class='back-face'></span></a></li>
				<li class="major-item" id="xw"> <a href="javascript:;"><span class="txt-hide front-face"></span><span id="back-face12"class='back-face'></span></a></li>
			</ul>
		</div>
	</div>

	<div class="back page4" id='page4'>
		<div id="page4yue3" class="page4yue3"></div>
		<div class='images-wrap'>
		<ul>
			<li><a href='javascript:;'><img class='animate-image' src='images/1.jpg' /></a></li>
			<li><a href='javascript:;'><img class='animate-image' src='images/2.jpg' /></a></li>
			<li><a href='javascript:;'><img class='animate-image' src='images/3.jpg' /></a></li>
			<li><a href='javascript:;'><img class='animate-image' src='images/4.jpg' /></a></li>
			<li><a href='javascript:;'><img class='animate-image' src='images/5.jpg' /></a></li>
			<li><a href='javascript:;'><img class='animate-image' src='images/6.jpg' /></a></li>
			<li><a href='javascript:;'><img class='animate-image' src='images/7.jpg' /></a></li>
			<li><a href='javascript:;'><img class='animate-image' src='images/8.jpg' /></a></li>
			<li><a href='javascript:;'><img class='animate-image' src='images/9.jpg' /></a></li>
			<li><a href='javascript:;'><img class='animate-image' src='images/10.jpg' /></a></li>
			<li><a href='javascript:;'><img class='animate-image' src='images/11.jpg' /></a></li>
			<li><a href='javascript:;'><img class='animate-image' src='images/12.jpg' /></a></li>
			<!-- <li><a href='#'><img class='animate-image' src='images/13.jpg' /></a></li> -->
			<li><a href='javascript:;'><img class='animate-image' src='images/14.jpg' /></a></li>
			<li><a href='javascript:;'><img class='animate-image' src='images/15.jpg' /></a></li>
			<li><a href='javascript:;'><img class='animate-image' src='images/16.jpg' /></a></li>
			<li><a href='javascript:;'><img class='animate-image' src='images/17.jpg' /></a></li>
			<li><a href='javascript:;'><img class='animate-image' src='images/18.jpg' /></a></li>
			<li><a href='javascript:;'><img class='animate-image' src='images/19.jpg' /></a></li>
			<li><a href='javascript:;'><img class='animate-image' src='images/20.jpg' /></a></li>
			<li><a href='javascript:;'><img class='animate-image' src='images/21.jpg' /></a></li>
		</ul>
			<span href="#" class="animate">Click me</span>
	</div>

	</div>
	<div class='toTop'>回到顶部</div>
</div>
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.path.js"></script>
<script language="javascript" type="text/javascript" src="js/main.js"></script>
<script>
	$(window).load(function(){
	$('#example1').hoverwords({ delay:50 });
	$('#example2').hoverwords();
	$('#example3').hoverwords();
	$('#example4').hoverwords({ overlay:true});
	$('#example5').hoverwords({ delay:60 });
	
});
</script>
</script>
</body>
</html>
